<template lang="html">
  <div class="container" v-loading="loading">
    <div class="search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input class="form_input" v-model="searchText" placeholder="请输入订单编号或客户姓名/设计师姓名/店铺名称/产品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
              <el-button type="primary" :disabled="isShutdownAudit" size="small" @click="onAuidt">一键打印</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="tables">
      <vTable :tableData="tableData" ref="vTable" :date="true" :tInData="tInData" @onCheckAll="onCheckAll" @onCheck="onCheck">
          <template slot="产品" slot-scope="scope">
            <div class="pro">
                <div class="pro_image">
                  <img :src="scope.row.picUrl" alt="">
                </div>
                <div class="pro_info">
                  <div class="pro_name">{{scope.row.commodityName}}</div>
                  <div class="num_color">{{scope.row.materialName}}/{{scope.row.color}}/{{scope.row.laceName}}x{{scope.row.auditNum}}</div>
                  <div class="address">制作工厂：{{scope.row.factoryName}}</div>
                </div>
            </div>
          </template>
          <template slot="客户" slot-scope="scope">
            <div class="userinfo">
              <p>ID：{{scope.row.mbId}}</p>
              <p>姓名：{{scope.row.userName}}</p>
              <p>手机号：{{scope.row.phone}}</p>
            </div>
          </template>
          <template slot="售后类型" slot-scope="scope">
            <p v-if="scope.row.afterSalaType == 1">新货调整({{scope.row.isFree == 1?"免费":"收费"}})</p>
            <p v-if="scope.row.afterSalaType == 2">减寸服务({{scope.row.isFree == 1?"免费":"收费"}})</p>
            <p v-if="scope.row.afterSalaType == 3">质量问题({{scope.row.isFree == 1?"免费":"收费"}})</p>
            <p v-if="scope.row.afterSalaType == 4">其他({{scope.row.isFree == 1?"免费":"收费"}})</p>
          </template>
          <template slot="状态" slot-scope="scope">
            <div class="">
              <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :inactive-value="2" :active-value="1" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
            </div>
          </template>
          <template slot="售后原因" slot-scope="scope">
              <div class="remarks">
                  <p>{{scope.row.afterSalaContent}}</p>
                  <el-button type="text" icon="el-icon-edit" @click="handleClick(scope.row)"></el-button>
              </div>
          </template>
          <template slot="操作" slot-scope="scope">
            <div style="padding:0 10px;line-height: 40px;">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">打印</el-button>
              <el-button size="mini" type="danger" @click="handleDetail(scope.row)">详情</el-button>
            </div>
          </template>
      </vTable>

    </div>

    <el-dialog title="查看售后原因" v-loading="loading" :visible.sync="dialogVisible2" :append-to-body="true" width="35%">
        <div class="">
          <el-input type="textarea" :rows="2" v-model="rows.afterSalaContent"></el-input>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="打印发货单" v-loading="loading" :visible.sync="dialogVisible3" append-to-body width="500px">
        <div class="form_item">
            <el-radio-group v-model="factoryId" @change="onRadioChange" style="padding-left:8px;">
                <el-radio style="margin-bottom:20px;" :label="item.id" :key="item.id" v-for="item in factoryOption">{{item.factoryName}}</el-radio>
            </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible3 = false">取 消</el-button>
            <el-button type="primary" @click="choose_factory">确定打印发货单</el-button>
        </span>
    </el-dialog>

    <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
  </div>
</template>

<script>
import { success1, warning1, cancel1 } from '@/api/utils';
export default {
  data(){
    return {
      loading: false,
      printType:"all",//all  one
      printId:"",//
      searchText: '',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      dialogVisible2: false,
      dialogVisible3:false,
      tableData: [],
      selectData:[],
      //选择工厂增加
      factoryOption:[],
      factoryId:"",
      tInData:[
        {
          props: 'orderSublistId',
        },
        {
          props: 'createTime',
        },
        {
          props: 'afterSalaTime',
          name: '售后日期',
        },
        {
          title: '产品',
          width: '350px',
        },
        {
          title: '销售价格',
          props: 'commodityPrice',
          width: '120px',
        },
        {
          title: '店铺',
          props: 'branchStoreName',
          width: '200px',
        },
        {
          title: '客户',
          width: '200px',
        },
        {
          title: '设计师',
          props: 'designerName',
          width: '120px',
        },
        {
          title: '应收金额',
          props: 'receivablePrice',
          width: '120px',
        },
        {
          title: '实收金额',
          props: 'receiptsPrice',
          width: '120px',
        },
        {
          title: '售后类型',
          width: '120px',
        },
        {
          title: '售后原因',
          width: '200px',
        },
        {
          title: '状态',
          width: '120px',
        },
        {
          title: '操作',
        },
      ],
      rows: {}
    }
  },
  computed:{
    isShutdownAudit:function(){
        return this.selectData.length == 0?true:false;
    }
  },
  mounted(){
      this.selectAfterSalaReturnPage();
  },
  async created(){
    await this.selectFactoryList();
  },
  methods:{
      //选择工厂
    async selectFactoryList(){
        let res = await this.$http.selectAfterSalaFactoryList();
        if(res.data.code == 0){
            this.factoryOption = res.data.data;
        }
    },
    selectAfterSalaReturnPage(){
      this.loading = true;
      this.$http.selectAfterSalaReturnPage({
        query: this.searchText,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }).then(res=>{
        this.loading = false;
        this.tableData = Object.assign([], res.data.rows);
        this.tableData.forEach(item=>{
          if(item.afterSalaTime){
            item.afterSalaTime = this.formatTime(item.afterSalaTime);
          }
          if(item.createTime){
            item.createTime = this.formatTime(item.createTime);
          }
        })
        this.totalPage = res.data.total;
        this.pageSize = res.data.pageSize;
      });
    },
    handleClick(e){
      this.rows = Object.assign({},e);
      this.dialogVisible2 = true;
    },
    save(){
      this.$http.updateAfterSalaContent({
        id: this.rows.id,
        afterSalaContent: this.rows.afterSalaContent
      }).then(res=>{
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.onSubmit();
          this.dialogVisible2 = false;
        }else{
          this.$message.error(res.data.message);
        }
      })
    },
    formatTime(value) {
      if(!value) return '';
      let oDate = new Date(value);
      let h = oDate.getHours()<10?'0'+oDate.getHours():oDate.getHours();
      let m = oDate.getMinutes()<10?'0'+oDate.getMinutes():oDate.getMinutes();
      let s = oDate.getSeconds()<10?'0'+oDate.getSeconds():oDate.getSeconds();
      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+h+':'+m+':'+s;
    },
    onCheckAll(val){
      if(val.status){
        this.selectData = [];
        this.tableData.forEach((item,index)=>{
          this.selectData.push(item);
        })
      }else{
        this.selectData = [];
      }
    },
    onRadioChange(){

    },
    onCheck(val){
      if(val.status){
        this.tableData.forEach((item,index)=>{
          if(val.index == index){
            this.selectData.push(item);
          }
        })
      }else{
        this.selectData = this.selectData.filter(arr=>(arr.id!==this.tableData[val.index].id))
      }
    },
    onAuidt(){
        let ids = [];
        this.selectData.forEach((item,index)=>{
            ids.push(item.id)
        });
        this.printType = "all"
        this.printId = ids;
        this.dialogVisible3 = true;
        // this.$confirm(`当前选中订单数量${this.selectData.length}`, '打印发货单').then(() => {
        //     this.$router.push({path: '/print',query:{type:1,ids:ids.join(',')}});
        // }).catch(() => 0);
    },
    handleEdit(e){
        this.printType = "one"
        this.printId = e.id;
        this.dialogVisible3 = true;
    //   this.$confirm('确认打印发货单？','打印发货单').then(()=>{
    //     this.$router.push({path: '/print',query:{type:1,id: e.id}});
    //   }).catch(()=>0);
    },
    choose_factory(){
        if(!this.factoryId){
            warning1(this, "必须选择一个工厂")
            return;
        }
        if(this.printType=="all"){
            var query = {
                type:1,
                ids:this.printId.join(','),
                factoryId:this.factoryId
            }
            this.$router.push({path: '/print',query:query});
        }else{
            var query = {
                type:1,
                id:this.printId,
                factoryId:this.factoryId
            }
            this.$router.push({path: '/print',query:query});
        }
    },
    handleDetail(e){
      let {href} = this.$router.resolve({ path: '/afterSale/afterSale_wrf/detail', query:{id:e.id,from:"待返厂"}});
      window.open(href, '_blank');
    },
    onSwitch(e){
      this.$http.closeAfterSalaReturn({id: e.id,opState:e.opState}).then(res=>{
        if(res.data.code===0){
            this.$message.success(res.data.message);
        }else{
            this.$message.error(res.data.message);
        }
      })
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.$refs.vTable.onCheckAll(false);
      this.$refs.vTable.checkAll = false;
      this.selectData = [];
      this.currentPage = e;
      this.selectAfterSalaReturnPage();
    },


  }
}
</script>

<style lang="css" scoped>
</style>
